<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>v-model指令修饰符</title>
  <style>
    [v-cloak] {
      display: none;
    }
  </style>
</head>
<body>

  <div id="app" v-cloak>
    <input v-model="text1" @input="showText1"/>
    <br/><br/>
    <p>忽略左右两边的空格</p>
    <input v-model.trim="text2" @input="showText2"/>
    <br/><br/>
    <p>数字修饰符，输入看出不同</p>
    <input v-model="text3"/>+500 = {{text3+500}}<br/>
    <input v-model.number="text4"/>+500 = {{text4+500}}<br/>
    <br/><br/>
    <p>lazy表示不在根据用户输入监听内容改变，而是通过onchange时改变</p>
    <input v-model.lazy="text5"/>
  </div>
  
  <script src="../lib/vue.3.4.js"></script>
  <script>
    const app = Vue.createApp({
      data () {
        return {
          text1: '',
          text2: '',
          text3: '',
          text4: '',
          text5: ''
        }
      },
      watch: {
        text5 () {
          console.log(this.text5);
        }
      },
      methods: {
        showText1 () {
          console.log(this.text1.length);
        },
        showText2 () {
          console.log(this.text2.length);
        },
      }
    }).mount('#app');
  </script>
</body> 
</html>